import { useToolBar } from "@renderer/hooks/use-tool-bar";
import { cn } from "@renderer/lib/utils";
import type { Message } from "@shared/triplit/types";
import type { ChatSettings } from "@shared/types/chat-settings";
import { motion } from "motion/react";
import { AssistantMessage } from "./assistant-message";
import { UserMessage } from "./user-message";

interface MessageListProps {
  messages: Message[];
  settings: ChatSettings;
  layoutMode?: "default" | "wide" | "ultra-wide";
}

export function MessageList({
  messages,
  settings,
  layoutMode = "default",
}: MessageListProps) {
  const { handleRefreshMessage } = useToolBar();

  if (messages.length === 0) {
    return null;
  }

  const getLayoutClass = (mode: string | null | undefined) => {
    switch (mode) {
      case "wide":
        return "max-w-[960px] px-8";
      case "ultra-wide":
        return "max-w-[1440px] px-6";
      default:
        return "max-w-[720px]";
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      data-screenshot-target="message-list"
      className={cn(
        "mx-auto flex w-full flex-col gap-y-[22px]",
        getLayoutClass(layoutMode),
      )}
    >
      {messages.map((message: Message) => (
        <div key={message.id}>
          {message.role === "user" ? (
            <UserMessage message={message} />
          ) : (
            <AssistantMessage
              message={message}
              handleRefreshMessage={handleRefreshMessage}
              settings={settings}
            />
          )}
        </div>
      ))}
    </motion.div>
  );
}
